<template>
	<view class="" :style="{'--themcolor':usethemestore.themecolor,'--themcolor2':usethemestore.themecolor2}" v-if="oerderdata">
		<view class="fixtop">
			<fixtop>
				<template #c>
					<view class="fix-c">订单</view>
				</template>
			</fixtop>
		</view>
		<view class="dd-conbox">
			<view class="navbar">
				<view class="" v-for="(i,index) in navdata" :key="i.name" :class="{actived:navindex==index}"
					@click="changenav(index,i.v)">{{i.name}}</view>
			</view>
			<scroll-view class="prodtctbox" scroll-y >
				<orderItemVue :data="i" v-for="i in showdata" :key="i" @gengxin="aginorder" />
				<view class="" style="height: 20rpx;"></view>
			</scroll-view>
		</view>
	</view>

</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	import fixtop from '@/components/fixtitletop/fixtitletop.vue'
	import orderItemVue from '../../components/order-item/order-item.vue'
	import {
		getstatusheight,
		gettitleheight
	} from "@/util/getsysinfo.js"
	import themestore from '@/store/theme.js'
	import {getorders} from '@/api/index.js'
	import userstotre from '@/store/user.js'
	const usethemestore = themestore()
	const useuserstotre=userstotre()
	const heights = getstatusheight() + gettitleheight() + 'px'
	const navindex = ref(0)
	const oerderdata=ref([])
	const showdata=ref([])
	const navdata = [{
			name: "全部订单",
			v: "000"
		},
		{
			name: "待支付",
			v: "0"
		},
		{
			name: "已完成",
			v: "1"
		},
		{
			name: "已取消",
			v: "2"
		}
	]
	onShow(() => {
		uni.setTabBarStyle({
			selectedColor: usethemestore.themecolor,
		})
		switch (usethemestore.themname) {
			case "pink": {
				console.log(usethemestore.themname)
				uni.setTabBarItem({
					index: 0,
					selectedIconPath: "static/sy-pink.png"
				})
				uni.setTabBarItem({
					index: 1,
					selectedIconPath: "static/dd-pink.png"
				})
				uni.setTabBarItem({
					index: 2,
					selectedIconPath: "static/wd-pink.png"
				})
				break
			}
			case "green": {
				console.log(usethemestore.themname)
				uni.setTabBarItem({
					index: 0,
					selectedIconPath: "static/sy-green.png"
				})
				uni.setTabBarItem({
					index: 1,
					selectedIconPath: "static/dd-green.png"
				})
				uni.setTabBarItem({
					index: 2,
					selectedIconPath: "static/wd-green.png"
				})
				break
			}
			case "orange": {
				console.log(usethemestore.themname)
				uni.setTabBarItem({
					index: 0,
					selectedIconPath: "static/sy-or.png"
				})
				uni.setTabBarItem({
					index: 1,
					selectedIconPath: "static/dd-or.png"
				})
				uni.setTabBarItem({
					index: 2,
					selectedIconPath: "static/wd-or.png"
				})
				break
			}
			case "blue": {
				console.log(usethemestore.themname)
				uni.setTabBarItem({
					index: 0,
					selectedIconPath: "static/sy2.png"
				})
				uni.setTabBarItem({
					index: 1,
					selectedIconPath: "static/dd2.png"
				})
				uni.setTabBarItem({
					index: 2,
					selectedIconPath: "static/wd2.png"
				})
				break
			}
		}
		getoerderdata()
	})
	onLoad(e => {
		if (e.type) {
			navindex.value = e.type
		}
	
	})
  const aginorder=()=>{
	  getoerderdata()
	  navindex.value=0
  }
	const changenav = (e,staus) => {
		navindex.value = e
		if(staus=='000'){
			return showdata.value=oerderdata.value
		}
		showdata.value=oerderdata.value.filter(e=>e.status==staus)
	}
	const getoerderdata=async()=>{
		const rudata=await getorders({userid:useuserstotre.userinfo.id})
		if(rudata.code==200){
			oerderdata.value=rudata.data
			showdata.value=rudata.data
		}
	}
</script>

<style lang="scss" scoped>
	.prodtctbox {
		height: calc(100% - 80rpx);

		::-webkit-scrollbar {
			display: none;
		}

	}

	.navbar {
		height: 80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		>view {
			height: 50rpx;
			width: fit-content;
			font-size: 25rpx;
			font-weight: 700;
		}

		.actived {
			position: relative;
			color: var(--themcolor);

			&::before {
				content: "";
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				height: 4rpx;
				width: 40%;
				border-radius: 2rpx;
				background-color:var(--themcolor);
			}
		}
	}

	.fixtop {
		background: linear-gradient(to top, #eeeeee,var(--themcolor));

		.fix-c {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
		}
	}

	.dd-conbox {
		height: calc(100vh - v-bind(heights));
		background-color: #eeeeee;
		padding: 0 30rpx;
	}
</style>